<template>
  <div id="user_view">
      
      <div id="user_side">
  
            <div class="user_view_btn user_update" id="search" @click="changeUserInfoShow">

                修改信息 
            </div>

            <div class="user_bottom_side">
                    <div class="user_view_btn user_sign">
                        签到记录
                    </div>

                    <div class="user_view_btn user_work_postpone" @click="changePostponeShow">
                        作业延期记录
                    </div>
            </div>

            <div class="user_bottom_side" id="user_bottom_side" style="margin-top:2%">
                <div class="user_view_btn user_course" @click="changeCourseStatus">
                    增加课程
                </div>

                <div class="user_view_btn user_reply" @click="changeReplayOrRecordShow">
                    留言记录
                </div>
            </div>


            

            <el-collapse-transition>
            <div class="bind_course" v-if="courseIshow">
                <div style="flex:0.7">

                    <el-input v-model="courseURL" placeholder="请输入需要绑定的课程url click->"></el-input>
                </div>
                <div style="margin-left:-12%">
                    <el-button type="primary" icon="el-icon-check" circle></el-button>
                </div>
            </div>
            </el-collapse-transition>
            <div class="set_btn" @click="setIsTrue = !setIsTrue">
                <i class="el-icon-setting"></i>
            </div>
            <div class="st_btn_view" v-show="setIsTrue">
                <div>
                    <el-radio v-model="startEmail" :label="false" > <i class="el-icon-close-notification"></i> 关闭邮箱通知</el-radio>
                </div>
                <div>
                    <el-radio v-model="startEmail" :label="true"><i class="el-icon-alarm-clock"></i> 开启邮箱通知</el-radio>
                </div>
                <div style="margin-top:10px;cursor:pointer;" @click="logOut">
                    <i class="el-icon-switch-button"></i>
                    退出登录
                </div>
            </div>

      </div>

      
      <div id="main">

      <transition name="el-fade-in-linear">
          <div id="user_info" v-if="userInfoIsShow">
              <div class="basic_info" v-loading="false">
                  <div class="info_avater">
                            <el-upload
                            class="avatar-uploader"
                            action="#"
                            :show-file-list="false"
                            v-model="userInfo.stuAvatar"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="userInfo.stuAvatar" :src="userInfo.stuAvatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                      
                  </div>    
                  <div class="userInfo_div">
                      <div style="width:200px">
                      姓名： {{userInfo.stuName}}

                      </div>
                      <div>
                      <!-- 用户名： suzyyy -->

                      </div>
                      <div style="width:200px">
                      性别： {{userInfo.stuGender}}

                      </div>

                      <div style="width:200px">
                      学号： {{userInfo.stuNumber}}

                      </div>
                      <div style="width:200px">
                      班级： {{userInfo.belongClassId === 0 ?'请绑定班级':userInfo.className}}
                      </div>
                  </div>
              </div>

              <div class="basic_info user_update_info">
                  <div class="can_update">
                     <el-form label-position="right" label-width="80px" :model="userInfo">
                        <div class="user_btn_input">
                            <el-button type="primary" round @click="phoneUpdate">update</el-button>
                            <el-form-item  style="display:inline-block;flex:1;" label="手机号">
                                <el-input v-model="userInfo.stuPhone" :disabled="phoneDisable" id="phoneInfoInput"></el-input>
                            </el-form-item>
                        </div>


                        <div class="user_btn_input">
                            <el-button type="primary" round @click="emailUpdate">update</el-button>
                            <el-form-item label="邮箱" style="display:inline-block;flex:1;">
                                <el-input v-model="userInfo.stuEmail" :disabled="emailDisable" id="emailInfoInput"></el-input>
                            </el-form-item>
                        </div>

                        <div style="margin-left:27%;margin-top:2%" v-if="updateBtnShow">
                            <el-button type="primary" round>submit</el-button>
                            <el-button  round @click="resetPhoneAndEmail">reset</el-button>
                        </div>
                    
                    </el-form>

                     <div style="margin-top:4.2%">
                            <el-input placeholder="请输入要绑定班级的链接url" v-model="classUrl" class="input-with-select">
                           
                            <el-button slot="append" icon="el-icon-refresh-right" @click="bindClass(classUrl)">
                                绑定班级
                            </el-button>
                        </el-input>
                        </div>
                  </div>

              </div>

              <div class="basic_info reset_password">

                  <div class="re_password_left">
                      忘记密码？<br> 
                      选择方式找回密码
                  </div>

                  <div class="re_password_right">
                    <div style="margin-top: 8%">
                        <el-radio-group v-model="pass_model" size="medium"  @change="passModelCheck(pass_model)">
                            <el-radio-button label="邮箱"></el-radio-button>
                            <el-radio-button label="手机号"></el-radio-button>
                            <el-radio-button label="原始密码"></el-radio-button>
                        </el-radio-group>
                        <br><br>
                        <div style="width:90%">
                            <el-input placeholder="请输入收到的验证码" v-model="checkCode" class="input-with-select">
                           
                            <el-button slot="append" icon="el-icon-refresh-right">
                                发送验证码
                            </el-button>
                        </el-input>
                        </div>
                          
                    </div>
                  </div>

              </div>


              

          </div>

      </transition>

        <transition name="el-fade-in-linear" v-if="replayRecordShow">
            <reply-record :stuName = "userInfo.stuName"></reply-record>
        </transition>

        <transition name="el-fade-in-linear" v-if="postponeShow">
            <postpone-record :stuName = "userInfo.stuName" ></postpone-record>
        </transition>
      </div>




  </div>
</template>

<script>
import ReplyRecord from '../components/ReplyRecord.vue';
import PostponeRecord from '../components/PostponeRecord.vue';

import { Storage } from "../storage";
import * as API from '../api/user/index'

export default {
    components:{
        ReplyRecord,
        PostponeRecord
    },
    data() {
        return {
            setIsTrue:false,
            startEmail:true,
            userInfoIsShow: true,
            replayRecordShow:false,
            courseIshow: false,
            courseURL:"",
            userInfo:{
                // avater: require("../../public/img/avater.png"),
                // email:'787356076@qq.com',
                // phone:'15890373389',
            },
            email_back:"",
            phone_back:"",
            pass_model:'邮箱',
            classUrl:"",
            checkCode:"",
            phoneDisable:true,
            emailDisable:true,
            updateBtnShow:false,
            postponeShow:false,
        }
    },
    methods: {
        changeUserInfoShow() {
            this.replayRecordShow = false
            this.postponeShow = false
            this.userInfoIsShow = true
            // document.getElementById("search").style.width = "350px"
            // document.getElementById("user_bottom_side").style.width = "350px"
        },
        changeCourseStatus() {
            if (this.courseIshow == true) {
                this.courseIshow = false
            }else {
                this.courseIshow = true
            }
        },
        changeReplayOrRecordShow() {
            // if (this.replayOrRecordShow == true) {
            //     this.replayOrRecordShow = false
            // }else {
            //     this.replayOrRecordShow = true
            // }
            this.userInfoIsShow = false
            this.postponeShow = false
            this.replayRecordShow = true
        },
        handleAvatarSuccess(res, file) {
            console.log(res,file)
            // this.imageUrl = require('../../public/img/apple.png')
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        passModelCheck(pass_model) {
            console.log("email btn 's click ---->", pass_model)
        },
        resetPhoneAndEmail() {
            this.userInfo.stuPhone = this.phone_back
            this.userInfo.stuEmail = this.email_back
        },
        phoneUpdate() {
            this.phoneDisable = false
            this.updateBtnShow = true
        },
        emailUpdate() {
            this.emailDisable = false
        },
        changePostponeShow() {
            this.replayRecordShow = false
            this.userInfoIsShow = false
            this.postponeShow = true
            
        },
        bindClass(url) {
            API.bindClass(url).then(res => {
                if (res.code == 200) {
                    Storage.clear("stu");
                    this.setStuInfo(res.data.stu)
                    Storage.set("stu", res.data.stu, 24 * 60 * 60 * 1000)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }else {
                    this.$message.error(res.data.error)
                    }
                }).catch(err => {
                    this.$message.error("网络错误 :( ！ err:", err)
                })
        },
        setStuInfo(stu) {
            this.userInfo = stu
            this.email_back = stu.stuEmail
            this.phone_back = stu.stuPhone
        },
        logOut() {
            Storage.clear("isLogin")
            Storage.clear("nothing-token")
            Storage.clear("stu")
            this.$router.push({path:"/login"})
        }
    },
    mounted() {
        let stu =  Storage.get("stu")
        if(stu != undefined && stu != '') {
            this.setStuInfo(stu)
        }
    }
}
</script>

<style>

#user_view {
    width: 100%;
    min-height: 1000px;
    margin-top: 8%;
    display: flex;
    justify-content: space-around;
    /* 子元素 交叉轴居中布局 */
    /* align-items: center; */
    border-top-left-radius:40px;
    border-top-right-radius:40px;
    background-color: whitesmoke;

}

/* user-side */
#user_side {
    margin-top: 3%;
    padding-left: 2%;
    /* margin-left: 2%; */
    display: flex;
    /* 为了方便使用aligin-self，这里用wrap代替使用 column */
    /* flex-direction: column; */
    flex-wrap: wrap;
    /* 当子容器多行排列时，设置行与行之间的对齐方式。 */
    align-content:flex-start;
    justify-content: center;
    
    width: 500px;
    height: 100%;
    flex: 0.3;
}

.user_view_btn {
    background-color: white;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.user_view_btn:hover {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
}

.user_bottom_side{
    width: 350px;
    height: 100px;
    border-radius: 15px;
    /* background-color: rgba(255, 99, 71, 0.75); */
    display: flex;
    justify-content: space-between;
    line-height: 100px;
    text-align: center;
}

.user_course {
    width: 50%;
    height: 100%;
    /* background-color: yellowgreen; */
    /* background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); */
    border-radius: 15px;
    cursor: pointer;
}

.user_reply{
    width: 50%;
    height: 100%;

    /* background-color: teal; */
    /* background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); */
    border-radius: 15px;
    margin-left: 3%;
    cursor: pointer;
}


.user_sign {
    width: 50%;
    height: 100%;

    /* background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%); */
    /* background-image: linear-gradient(to right, #fee140 0%, #fa709a 102%); */
    border-radius: 15px;
    cursor: pointer;
}

.user_work_postpone {
    margin-left: 3%;
    width: 50%;
    height: 100%;
    /* background-color: yellowgreen; */
    /* background-image: linear-gradient(120deg,  #f5576c -5%, #f093fb 100%); */
    border-radius: 15px;
    cursor: pointer;
}

.user_update{
    width: 350px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 15px;
    /* background-color: rgba(199, 195, 199, 0.7); */
    /* background-image: linear-gradient(120deg, #e0c3fc 30%, #8ec5fc 100%); */
    /* background-image: linear-gradient(to right, #ec77ab 30%, #7873f5 100%); */
    margin-bottom: 2%;
    /* flex: 0.5; */
    cursor: pointer;
}

.bind_course {
    margin-top: 6%;
    display: flex;
    justify-content: space-around;
    width: 100%;
    
}

.set_btn{
    width: 50px;
    height: 50px;
    background-color: white;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    cursor:pointer;

    position: fixed;
    bottom: 3%;
    left: 3%;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.st_btn_view {
    width: 200px;
    height: 100px;
    background-color: white;
    position: absolute;
    position: fixed;
    bottom: 3%;
    left: 8%;
    border-radius: 15px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* user-info-main */
#main{
    width: 700px;
    height: 100%;
    /* background-color: whitesmoke; */
    /* box-shadow: 0 3px 3px 1px rgb(255, 255, 255); */
    /* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); */
    /* border-radius: 15px;  */
    flex: 0.7;
    margin-left: 1%;

}

#user_info{
    width: 100%;
    height: 100%;

    /* 子容器 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.basic_info {
    margin-top: 4%;
    width: 690px;
    /* width: 75%; */

    /* flex: 0.7; */
    height: 150px;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); 

    display: flex;
}

.info_avater {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    flex: 0.46;
    
}

.avater_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    /* opacity: 0.1; */
}

.userInfo_div {
    height: 100%;
    /* background-color: rgb(124, 113, 111); */
    flex: 0.6;
    border-radius: 15px;

    /* 子容器 */
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: center;

}

.user_update_info{
    /* width: 75%; */
    /* background-color: tomato; */
    display: flex;
    /* flex:0.32; */
    height: 240px;
    justify-content: flex-end;
}

.can_update {
    margin-top: 3%;
    padding-right: 5%;
    width: 60%;
    flex: 0.72;
}

.user_btn_input {
    margin-top: 2%;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 40px;
}

.reset_password {
    display: flex;
    /* flex: 0.22; */
    height: 165px;
    justify-content: space-around;
}

.re_password_left {
    padding-top: 4%;
    /* display: flex; */
    height: 100%;
    flex: 0.5;
    text-align: center;
}

.re_password_right {
    height: 100%;
    flex: 0.67;
}

</style>